<template>
	<view class="container">
		<view class="headBox">
			<view class="logo-show">
				<view class="logo">
					<image src="@/static/login/logo.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="logo-show">
				<view class="logo">
					<view>匠想科技</view>
				</view>
			</view>
			<!-- <image class="company-name" src="@/static/login/name2.png" mode="widthFix"></image> -->
			<view class="title">
				<view class="text" :class="loginIndex == 1?'active':''" @tap="changeLoginType(1)">密码登录</view>
				<view class="line"></view>
				<view class="text" :class="loginIndex == 0?'active':''" @tap="changeLoginType(0)">短信登录</view>
			</view>
		</view>
		<view class="formBox">
			<view class="login-container">
				<!-- 验证码登录 -->
				<u--form :model="form" ref="uForm" v-if="loginIndex == 0">
					<u-form-item :border-bottom="false">
						<view class="loginInput">
							<image class="icons" src="@/static/login/icon1.png" mode="widthFix"></image>
							<input placeholder-class="placeholderStyle" cursor-spacing="10" border="none" color="#fff"
								maxlength="11" placeholder="请输入您的手机号" v-model="form.phone" @input="phoneChange" />
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="loginInput imgCode">
							<image class="icons" src="@/static/login/icon4.png" mode="widthFix"></image>
							<input placeholder-class="placeholderStyle" cursor-spacing="10" border="none" color="#fff"
								maxlength="6" placeholder="请输入计算结果" v-model="form.loginCode" />
							<view class="image-box">
								<image class="codeImg" @tap="getLoginCode" :src="loginCodeSrc2" mode="heightFix"></image>
							</view>
						</view>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="loginInput send-con">
							<image class="icons" src="@/static/login/icon2.png" mode="widthFix"></image>
							<input placeholder-class="placeholderStyle" border="none" :clearable="false"
								placeholder="请输入验证码" v-model="form.verification" maxlength="6" />
							<u-code change-text="x秒后" ref="uCode" @change="codeChange">
							</u-code>
							<text class="send" @tap="getCode">{{tips}}</text>
						</view>
					</u-form-item>
					<view class="zcxy">
						<view class="check-box">
							<u-checkbox-group size="14px" @change="checkChange">
								<u-checkbox :checked="checked" inactiveColor="#000000" labelColor="#000000"
									labelSize="12px" size="14px" activeColor="#C09B3A" shape="circle" label="已阅读并同意">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="check-text">
							<text class="text_2" @tap.stop="agreement('zhucexieyikey')">《用户协议》</text>
							<text class="text_1">和</text>
							<text class="text_2" @tap.stop="agreement('yinsixieyikey')">《隐私政策》</text>
						</view>
					</view>
				</u--form>
				<!-- 密码登录 -->
				<u--form :model="form" ref="uForm" v-if="loginIndex == 1">
					<u-form-item :border-bottom="false">
						<view class="loginInput">
							<image class="icons" src="@/static/login/icon1.png" mode="widthFix"></image>
							<input placeholder-class="placeholderStyle" border="none" color="#fff" maxlength="11"
								placeholder="请输入您的手机号" v-model="form.phone" @input="phoneChange" />
						</view>
					</u-form-item>

					<u-form-item :border-bottom="false">
						<view class="loginInput passIcon">
							<image class="icons" src="@/static/login/icon5.png" mode="widthFix"></image>
							<input placeholder-class="placeholderStyle" border="none" color="#fff"
								:password="passFlag?false:true" placeholder="请输入8-15位字母+数字组合的密码" maxlength="15"
								v-model="form.passWord" />
							<image @tap="passFlag = !passFlag" class="iconfont1" mode="aspectFit"
								:src="passFlag?require('@/static/login/kejian.png'):require('@/static/login/nkejian.png')">
							</image>
							<text @tap="goSetPasswd()">忘记密码？</text>
						</view>
					</u-form-item>

					<u-form-item :border-bottom="false" style="width: 100%;">
						<view class="loginInput send-con imgCode" style="width: 100%;">
							<image class="icons" src="@/static/login/icon4.png" mode="widthFix"></image>
							<input placeholder-class="placeholderStyle" border="none" :clearable="false"
								placeholder="请输入计算结果" v-model="form.loginCode" />
							<view class="image-box">
								<image class="codeImg" @tap="getLoginCode" :src="loginCodeSrc2" mode="heightFix"></image>
							</view>
							
						</view>
					</u-form-item>

					<view class="zcxy">
						<view class="check-box">
							<u-checkbox-group size="14px" @change="checkChange">
								<u-checkbox :checked="checked" inactiveColor="#000000" labelColor="#000000"
									labelSize="12px" size="14px" activeColor="#C09B3A" shape="circle" label="已阅读并同意">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<view class="check-text">
							<text class="text_2" @tap.stop="agreement('zhucexieyikey')">《用户协议》</text>
							<text class="text_1">和</text>
							<text class="text_2" @tap.stop="agreement('yinsixieyikey')">《隐私政策》</text>
						</view>
					</view>
				</u--form>

				<view class="login-btn" @tap="submit">
					<view class="register1-btn">
						登录
					</view>
				</view>

				<view class="changeLoginType">
					<!-- <view class="register" @tap="goRegister">立即注册</view> -->
					<view class="">没有账号？<text @tap="goRegister">去注册</text></view>
				</view>
			</view>
		</view>

		<u-popup :show="show" bg-color="#141414" :round="20" :customStyle="{width:'620upx'}" mode="center"
			:closeable="true" @close="close">
			<view class="code-tips">
				<view class="code-title">
					图形验证码
				</view>
				<view class="input-code">
					<view class="input-box">
						<input v-model="form.loginCode" placeholder="请输入计算结果" placeholder-class="placeholderStyle"
							:focus="isFocus">
						</input>
					</view>
					<view class="image-box">
						<image ref="loginCode" @tap="getLoginCode" style="width: 100%;" :src="loginCodeSrc2"
							mode="heightFix"></image>
					</view>
				</view>
				<view class="confirm-btn" @tap="getPhoneCode">
					确定
				</view>
			</view>
		</u-popup>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		verifyCodeLogin,
		sendPhoneCode,
		getBySpmkey,
		passwordLogin
	} from "@/api/login.js"
	import {
		phoneType
	} from '@/common/util.js'
	import qrcode from '../../common/reqrcode.js'
	export default {
		props: {
			titleText: {
				default: '登录账号'
			}
		},
		data() {
			return {
				passFlag: false,
				loginCodeSrc: '',
				loginCodeSrc2: require("@/static/login/yanzhengma.png"),
				loginCodeUid: '',
				tips: '',
				form: {
					phone: '',
					loginCode: '',
					verification: '',
					agreement: [],
					passWord: ""
				},
				htmlContent: '',
				htmlShow: false,
				scanWord: '',
				show: false,
				imgIndex: 0,
				isActive: true,
				firstFocus: false,
				isFocus: false,
				checked: false,
				loginIndex: 1
			};
		},
		onLoad(opt) {
			if (opt.type == 1) {
				this.loginIndex = 1;
			}
			// if (uni.getStorageSync('isLogin')) {
			// 	uni.switchTab({
			// 		url: '/pages/index/home'
			// 	});
			// }
		},
		mounted() {
			this.getLoginCode();
		},
		methods: {
			goSetPasswd() { //忘记密码
				uni.redirectTo({
					url: "/pages/login/forgotPassword",
				});
			},
			changeLoginType(i) {
				this.checked = false;
				this.loginIndex = i;
				this.userName = "";
				this.loginCode = "";
			},
			checkChange() {
				this.checked = !this.checked;
			},
			isStyle(data, izSellOut) {
				if (data == 'formBox') {
					if (izSellOut) {
						return {
							'transform': 'translateY(-300upx)'
						}
					} else {
						return {
							'transform': 'translateY(0upx)'
						}
					}
				} else if (data == 'send') {
					if (izSellOut) {
						return {
							'color': '#C09B3A'
						}
					} else {
						return {
							'color': '#C09B3A'
						}
					}
				}
			},
			phoneChange() {
				let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (reg.test(this.form.phone)) {
					this.isActive = false;
				} else {
					this.isActive = true;
				}
			},
			submit() {
				let obj = {
					loginCode: this.form.loginCode,
					uid: this.loginCodeUid,
					userName: this.form.phone,
					verifyCode: this.form.verification,
					passWord: this.form.passWord,
				}
				if (!this.checked) {
					this.$u.toast("请勾选已阅读协议！");
					return;
				}
				if (this.loginIndex == 0) {
					try {
						if (!obj.userName) throw '请输入手机号码'
						if (!obj.loginCode) throw '请输入图形验证码'
						if (!obj.verifyCode) throw '请输入短信验证码'
					} catch (e) {
						this.$u.toast(e);
						return
					}
				} else {
					try {
						if (!obj.userName) throw '请输入手机号码'
						if (!obj.passWord) throw '请输入登录密码'
						if (!obj.loginCode) throw '请输入图形验证码'
					} catch (e) {
						this.$u.toast(e);
						return;
					}
				}

				this.logins(obj);
			},
			logins(obj) {
				if (this.loginIndex == 0) {
					this.$refs.min_loading.open('正在登录');
					verifyCodeLogin(obj).then(res => {
						this.$refs.min_loading.close();
						if (res.data.success) {
							let dateTime = new Date().getTime()

							try {
								uni.setStorageSync('newToken', {
									token: res.data.obj.token,
									overtime: dateTime + (24 * 60 * 60 * 1000)
								});
							} catch (e) {
								// error
							}
							this.$store.dispatch("userLogin");
							this.$store.dispatch("getuser", 1);
						} else {
							this.$u.toast(res.data.msg);
						}
					}).catch(() => {
						this.$refs.min_loading.close();
						this.$u.toast('网络错误');
					}).finally(() => {});
				} else {
					let reg = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*.]{8,15}$/;
					if (!reg.test(obj.passWord)) {
						this.$u.toast('密码必须是由8-15位字母+数字组合');
						return;
					}
					this.$refs.min_loading.open('正在登录');
					obj.passWord = this.hrymd5.md5(obj.passWord);
					passwordLogin(obj).then(res => {
						this.$refs.min_loading.close();
						if (res.data.success) {
							let dateTime = new Date().getTime()
							try {
								uni.setStorageSync('newToken', {
									token: res.data.obj.token,
									overtime: dateTime + (24 * 60 * 60 * 1000)
								});
							} catch (e) {
								// error
							}
							this.$store.dispatch("userLogin");
							this.$store.dispatch("getuser", 1);
						} else {
							this.$u.toast(res.data.msg);
						}
					}).catch(() => {
						this.$refs.min_loading.close();
						this.$u.toast('网络错误');
					}).finally(() => {});
				}
			},
			// 重新获取图片验证码
			getLoginCode() {
				this.loginCodeUid = new Date().getTime()
				this.loginCodeSrc = `${this.baseApi}/code/loginCode?uid=${this.loginCodeUid}`
			},
			// 用户协议和隐私政策
			agreement(type) {
				uni.navigateTo({
					url: '/pages/login/agreement?type=' + type
				});
			},
			// 跳转注册页面
			goRegister() {
				uni.redirectTo({
					url: '/pages/login/register'
				})
			},
			// 获取验证码
			codeChange(text) {
				this.tips = text;
			},
			// 收起图片验证码弹窗
			close() {
				this.form.loginCode = "";
				this.show = false;
			},
			// 验证码倒计时
			getCode() {
				if (this.form.loginCode) {
					try {
						if (!this.form.phone) throw '请输入手机号'
						let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
						if (!reg.test(this.form.phone)) throw '手机号码格式不正确'
						// if (!this.form.loginCode) throw '请输入图形验证码'
					} catch (err) {
						this.$u.toast(err);
						return
					}
					this.getPhoneCode();
					// this.getLoginCode();
					// this.show = true;
					// this.isFocus = true
				}else{
					this.$u.toast('请输入图形验证码');
				}
			},
			getPhoneCode() {
				try {
					if (!this.form.loginCode) throw "请输入验证码";
				} catch (e) {
					this.$u.toast(e);
					return;
				}
				// uni.showLoading({
				// 	title: '正在发送短信验证码'
				// })
				this.$refs.min_loading.open('正在发送短信验证码');
				let obj = {
					mobile: this.form.phone,
					uid: this.loginCodeUid,
					viewCode: this.form.loginCode
				}
				sendPhoneCode(obj).then(res => {
					if (res.data.success) {
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.show = false
					} else {
						this.$u.toast(res.data.msg);
						this.form.loginCode = "";
						this.getLoginCode()
						// this.$refs.uCode.reset();
					}
				}).catch(err => {
					uni.clearStorage()
					this.$u.toast('网络错误');
				}).finally(() => {
					// uni.hideLoading();
					this.$refs.min_loading.close();
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.placeholderStyle {
		font-size: 30upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #565656;
	}

	.login-container {
		width: 100%;
		padding: 30upx 20upx;
		// padding-top: 60upx;
		font-size: 28upx;
		color: #333;
		background: #FDFDFF;
		box-shadow: 0px 18upx 62upx 4upx rgba(225, 208, 189, 0.5400);
		border-radius: 12upx;

		/deep/.u-form-item__body {
			padding: 0 0;
		}

		.changeLoginType {
			display: flex;
			align-items: center;
			justify-content: center;
			
			text-align: center;
			font-size: 24upx;
			font-weight: 500;
			color: #000000;
			margin-top: 30upx;
			margin-bottom: 40upx;
			
			text{
				color: #C09B3A;
			}
			// padding-bottom: 50upx;
		}

		.login-btn {
			position: relative;
			font-size: 32upx;
			color: #fff;

			text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -60%);
			}

		}

		.send-con {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.send {
				font-size: 26upx;
				color: #C09B3A;
			}
		}

		.imgCode {
			width: 100%;
			position: relative;
			overflow: hidden;

			input {
				width: 60%;
			}
			
			.image-box{
				padding: 10upx 10upx 10upx 0;
				position: absolute !important;
				right: 0 !important;
				top: 0 !important;
				height: 100%;
				
				.codeImg {
					height: 100%;
				}
			}

		}

	}

	.container {
		width: 100%;
		height: 100%;

		.formBox {
			width: 100%;
			z-index: 100;
			display: flex;
			padding: 0 30upx;
			align-items: center;
			flex-direction: column;
			margin-top: -220upx;
		}

		.headBox {
			width: 100%;
			height: 756upx;
			background-image: url("../../static/login/bg.png");
			background-size: 100% 662upx;
			background-repeat: no-repeat;
			text-align: center;
			color: #fff;

			.company-name {
				width: 216upx;
				margin-top: 16upx;
			}

			.title {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40upx;
				
				.text{
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				
				.line{
					margin: 0 20upx;
					height: 32upx;
					width: 4upx;
					background: #F2F2F2;
				}
				
				.active{
					color: #FFFFFF;
					font-weight: 800;
				}
			}

			.logo-show {
				width: 100%;

				.logo {
					width: 100%;
					display: flex;
					justify-content: center;
					padding-top: 80upx;

					image {
						width: 224upx;
					}
				}

				.name {
					font-size: 24upx;
					padding-top: 16upx;
					font-weight: normal;
					line-height: 24upx;
				}

				.str {
					font-size: 19upx;
					line-height: 24upx;
					width: 240upx;
					margin: 0 auto;
					margin-top: 8upx;
					text-align: center;
				}
			}
		}
	}

	.loginInput {
		width: 100%;
		height: 90upx;
		padding: 0 20upx;
		padding-left: 80upx;
		margin: 0 0 30upx;
		border-radius: 5upx;
		background-color: #F5F5F5;
		display: flex;
		align-items: center;
		position: relative;
		border-radius: 6upx;

		.icons {
			width: 30upx;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 20upx;
		}

		input {
			width: 100%;
		}
	}

	.send-con,
	.passIcon {
		input {
			width: 60%;
		}
	}

	.passIcon {
		input {
			width: 62%;
		}
	}

	.passIcon {
		position: relative;

		>text {
			display: inline-block;
			line-height: 90upx;
			position: absolute;
			top: 0;
			right: 12upx;
			color: #C09B3A;
			font-size: 24upx;
		}

		.iconfont1 {
			position: absolute;
			top: 34upx;
			left: 68%;
			width: 50upx;
			height: 30upx;
		}
	}

	.zcxy {
		display: flex;
		width: 100%;
		height: 32upx;
		align-items: center;
		justify-items: center;
		margin-top: 70upx;

		.check-text {
			font-size: 24upx;
			color: #000000;

			.text_2 {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				text-align: center;
				color: #C09B3A;
			}


		}
	}
	
	.register1-btn {
		margin: 20upx 0 20upx 0;
		width: 100%;
		height: 96upx;
		line-height: 96upx;
		background-color: #CEA539;
		font-family: PingFang SC;
		font-size: 32upx;
		text-align: center;
		color: #fff;
		font-weight: bold;
		letter-spacing: 10upx;
		border-radius: 6upx;
		
	}

	.code-tips {
		width: 100%;
		height: 448upx;
		padding: 0 32upx;
		border-radius: 20upx;

		.code-title {
			margin-top: 64upx;
			margin-bottom: 48upx;
			font-family: PingFang SC;
			font-style: normal;
			font-size: 30upx;
			line-height: 50upx;
			text-align: center;
			color: #ffffff;
			mix-blend-mode: normal;
		}

		.input-code {
			display: flex;
			height: 85upx;
			justify-content: space-between;
			align-items: center;
			background-color: rgba(255, 255, 255, 0.15);
			border-radius: 43upx;

			.input-box {
				color: #fff;
				height: 100%;
				// width: 326upx;
				flex: 1%;
				padding: 0 40upx;

				input {
					font-size: 24upx;
					height: 100%;
				}
			}

			.image-box {
				height: 100%;
				border-radius: 43upx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 43upx;
				}
			}
		}

		.confirm-btn {
			margin-top: 60upx;
			width: 100%;
			height: 80upx;
			line-height: 80upx;
			background-color: #2b267f;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 600;
			font-size: 30upx;
			text-align: center;
			color: #ffffff;
		}
	}
</style>
